<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Boot WMS</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css"> 
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> 
  
  
   <!-- jsGrid -->
  <link rel="stylesheet" href="plugins/jsgrid/jsgrid.min.css">
  <link rel="stylesheet" href="plugins/jsgrid/jsgrid-theme.min.css">
  
  
  <!-- jquery-ui -->
  <link rel="stylesheet" href="plugins/jquery-ui/jquery-ui.min.css">
  
  <!-- Tempusdominus Bbootstrap 4 -->
  <link rel="stylesheet" href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- JQVMap -->
  <link rel="stylesheet" href="plugins/jqvmap/jqvmap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
  <!-- summernote -->
  <link rel="stylesheet" href="plugins/summernote/summernote-bs4.css"> 
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">  
	<div id="test1"></div> 
	<div id="test2"></div>
    
    <ul class="navbar-nav ml-auto"> 
		<div id="test3"></div> 
		<div id="test4"></div>
		<li class="nav-item">
		  <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
		    <i class="fas fa-th-large"></i>
		  </a>
		</li>
    </ul>
  </nav>
  <!-- /.navbar -->


  <aside class="main-sidebar sidebar-dark-primary elevation-4">
  	<div id="logo1"></div> 
    <div class="sidebar">
		<div id="user1"></div>
		<nav class="mt-2">
			 <ul class="nav nav-pills nav-sidebar flex-column" 
			 	 data-widget="treeview" 
			 	 role="menu" 
			 	 data-accordion="false">
			 	<div id="menu1"></div> 
		 	 </ul>
		</nav>
  	</div> 
  </aside>  


  <div class="content-wrapper">
  	<!-- 主区域标题 -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-9">
	          <h1 class="m-0 text-dark">
   				货主信息维护
	          </h1>
          </div>
          
          <div class="col-sm-1"> 
          	<button type="button" 
          		    class="btn btn-block btn-primary"
          		    data-toggle="modal"
          		    data-target="#modal-addNewStoreKeyForm">
          		新增
          	</button>
          </div>
          
          <div class="col-sm-2"> 
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="./index6.html">主页</a></li>
              <li class="breadcrumb-item active">货主信息</li>
            </ol>
          </div>
        </div>
      
      </div>
   
    </section>
    
    
    <!-- 主数据区域 -->
    <!-- Main content -->
    <section class="content">
      <div class="card">    
        <div class="card-header">
          <h3 class="card-title">货主的数据列表</h3>
        </div> 
    
        <div class="card-body">
    		<div id="jsGrid1"></div>
    	</div>
      </div>
      <div id="addNewStoreKeyForm"></div>
      <div id="showStoreKeyForm"></div>
    </section>
  </div>

<div class="modal fade" id="modal-editStoreKeyForm">
	<div class="modal-dialog modal-xl">
  		<div class="modal-content">
			<div class="modal-header">
			  <h4 class="modal-title">编辑客户信息</h4>
			  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			  </button>
			</div>
			
			<div class="modal-body">
			  <!-- <p>One fine body&hellip;</p> -->
			  <p>编辑窗口</p>
			  <hr/> 
  			  <div class="card-body">
	        	  <form action="" name="post_form" id="post_form" role="form">
	        	    <div class="row">
						<div class="col-sm-6">
		  					<div class="form-group">
			  					<label>系统编号</label>
								<input type="text" id="id" name="id" readonly
									class="form-control" placeholder="">
		  					</div>
						</div>
						<div class="col-sm-6">
		  					<div class="form-group">
		  						<label>创建日期</label>
								<input type="text" id="addDate" name="addDate" readonly
									class="form-control" placeholder="">
		  					</div>
						</div> 
	        	    </div>
	  				<div class="row">
						<div class="col-sm-6">
		  					<div class="form-group">
			  					<label>货主编号</label>
								<input type="text" id="storeKey" name="storeKey" 
									class="form-control" placeholder="">
		  					</div>
						</div>
						<div class="col-sm-6">
		  					<div class="form-group">
		  						<label>货主名称</label>
								<input type="text"  id="storeName" name="storeName" 
									class="form-control" placeholder="">
		  					</div>
						</div> 
				  	</div>
	  				<div class="row">
						<div class="col-sm-6">
		  					<div class="form-group">
			  					<label>货主编号</label>
								<input type="text"  id="storeNO" name="storeNO" 
									class="form-control" placeholder="">
		  					</div>
						</div>
						<div class="col-sm-6">
		  					<div class="form-group">
		  						<label>货主地址</label>
								<input type="text"  id="address" name="address" 
									class="form-control" placeholder="">
		  					</div>
						</div> 
				  	</div>
				  </form>
			  </div>
			</div>
			
			<div class="modal-footer justify-content-between">
			  <button type="button" class="btn btn-default" data-dismiss="modal">
			  	Close
			  </button>
			  <button type="button" onclick="postEditData()" data-dismiss="modal" 
			  	class="btn btn-primary">保存
	  		  </button>
			</div>
	
		</div>
	</div>
</div>


<div class="modal fade" id="modal-delete1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">
        	确认删除
        </h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
        	是否要删除编号为: &nbsp; <span id="idNo"></span> &nbsp; 的货主
        </p>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">
        	关闭
        </button>
        <button type="button" onclick="confirmedDel()" data-dismiss="modal" 
        	class="btn btn-primary">确认删除</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div id="footer"></div>
  
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="plugins/jsgrid/jsgrid.min.js"></script>

<!-- AdminLTE App -->
<script src="dist/js/adminlte.js"></script>
</body>
<script type="text/javascript">

	var delId = null;


	function timestampToString(timestamp) {
	    // 创建一个新的 Date 对象，使用传入的时间戳（注意：JavaScript 的 Date 对象期望的是毫秒）
	    const date = new Date(timestamp);
	
	    // 获取各个部分
	    const year = date.getFullYear();
	    const month = String(date.getMonth() + 1).padStart(2, '0'); // getMonth() 返回值是 0-11
	    const day = String(date.getDate()).padStart(2, '0');
	    const hours = String(date.getHours()).padStart(2, '0');
	    const minutes = String(date.getMinutes()).padStart(2, '0');
	    const seconds = String(date.getSeconds()).padStart(2, '0');
	
	    // 格式化输出
	    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	}

	// 示例时间戳 (毫秒)
	const timestamp = 1641234567890;
	console.log(timestampToString(timestamp));  // 输出类似 "2022-01-03 12:34:56"

	(function($){
		console.log("start");
		localStorage.setItem("menuId", 1);
		//$("#mainHeader").load("mainHeader1.html");
		$("#test1").load("test1.html");
		$("#test2").load("test2.html");
		$("#test3").load("test3.html");
		$("#test4").load("test4.html");
		$("#logo1").load("logo1.html");
		$("#user1").load("user1.html");
		$("#menu1").load("menu1.html");
		$("#footer").load("foot.html");

		$("#addNewStoreKeyForm").load("addNewStoreKeyForm.html");
		$("#showStoreKeyForm").load("showStoreKeyForm.html");
		
		initialData();
		initialTable();
	})(jQuery);

	function initialData(){
		

		setTimeout(function () { 
			console.log("initialData changeActive3333");
			changeMenuActive(1);
        },1000);
	}
	
	function initialTable(){
		console.log("initialTable");
		

		var data1 = {};
		var url1 = "../api/baseInfo/cmn/listStoreKey";
		/* 
		data1['aaa'] = 'aaa';
		data1['bbb'] = 'bbb';
		data1['ccc'] = 'ccc';
		
		data1.aaa = "aaa";
		data1.bbb = "bbb";
		data1.ccc = "ccc";
		 */
		$.ajax({
			type: "post",
			url: url1,
			dataType: "json",
			data: data1,
			success: function (res) { 
				console.log("ajax");
				console.log(res);
				/* 
				address: "测试地址68"
				id: 1
				storeKey: "TestKey_78"
				storeNO: "No.51"
				storeName: "测试客户名7843"
				*/
				$("#jsGrid1").jsGrid({
			        height: "510px",
			        width: "100%",  
			        paging: true,  
	                pageSize: 10, 
					fields:[
						{ name: "id", type: "number",  title: "编号",width: 50 },
			            { name: "storeKey", type: "text", title: "货主编号", width: 150 },
			            { name: "storeName", type: "text", title: "货主名称", width: 150 },
			            { name: "storeNO", type: "text", title: "货主自有编号", width: 150 },
			            { name: "address", type: "text", title: "货主地址", width: 150 },
			        	{ 
			                type: "control", 
			                editButton: false, // 隐藏默认编辑按钮
			                itemTemplate: function(value, item) {
			                    return $("<button>")
			                    	.text("编辑")
			                    	.addClass("btn btn-block btn-defaul")
			                    	.on("click", function() {
		                        		//alert("ID: " + item.id);
		                        		showEditForm1(item.id)
		                        		console.log("编辑")
		                    		});
			                }
			            },
			        	{ 
			                type: "control", 
			                editButton: false, // 隐藏默认编辑按钮
			                itemTemplate: function(value, item) {
			                    return $("<button>").text("删除")
			                    .addClass("btn btn-block btn-defaul")
			                    .on("click", function() {
			                        //alert("ID: " + item.id);
			                        console.log("删除")
			                        showDelForm1(item.id)
			                    });
			                }
			            }
					],
					data:res,
			        rowDoubleClick: function(args){
			    		console.log("rowDoubleClick args-=>",args);
			    		console.log("rowDoubleClick args.item-=>",args.item);

			        	//showDetailFrom(args.item);
			        	showStoreKeyForm1(args.item);
			        }
				});

			},
			error: function () {
				alert("后台访问错误，请联系管理员！");
			}
		}); 
	}
/*
	{ 
        type: "control", 
        editButton: false, // 隐藏默认编辑按钮
        itemTemplate: function(value, item) {
            return $("<button>").text("详情").on("click", function() {
                alert("ID: " + item.id);
            });
        }
    }
 */
 
 	function showDelForm1(e){
		console.log("showDelForm1-=>",e) 
		
		$("#modal-delete1").modal('show');
		
		delId = e;
		$("#idNo").text(""+e)
		
	}
 
 	function confirmedDel(){
		console.log("confirmedDel()") 
 		var url2 = '../api/baseInfo/cmn/delete'
		var data1 = {id:delId};
		console.log("confirmedDel data1-=>",data1)
		$.ajax({
			type: "post",
			url: url2,
			dataType: "json",
			data: data1,
			success: function (res){
				console.log("confirmedDel-=>",res); 
		        console.log("提交成功");
				
				initialTable();
			},
			error: function () {
				//alert("后台访问错误，请联系管理员！");
			}
		});

		setTimeout(()=> {
			initialTable();
		},555)
 	}

 	function showEditForm1(e){
		console.log("showEditForm1-=>",e) 
		
		$("#modal-editStoreKeyForm").modal('show');

 		$("#modal-editStoreKeyForm #id").val(e)
 		

		var data1 = {id:e};
		var url1 = "../api/baseInfo/cmn/selectById";
		$.ajax({
			type: "post",
			url: url1,
			dataType: "json",
			data: data1,
			success: function(res){
				console.log("showEditForm1-=>",res);	
				if(res.addDate == '' || res.addDate == null 
				   || res.addDate == undefined || res.addDate == NaN )
				{}else{ 
					let strD1 = timestampToString(res.addDate)
			 		$("#modal-editStoreKeyForm #addDate").val(strD1) 
				}
		 		$("#modal-editStoreKeyForm #storeKey").val(res.storeKey)
		 		$("#modal-editStoreKeyForm #storeName").val(res.storeName)
		 		$("#modal-editStoreKeyForm #storeNO").val(res.storeNO)
		 		$("#modal-editStoreKeyForm #address").val(res.address)
			},
			//此处添加错误处理
			error: function () {
				//alert("后台访问错误，请联系管理员！");
			}
		});
 		
 		
 	}
 
 	function postEditData(){
 		//update
 		
 		
	    var formData = $('#modal-editStoreKeyForm #post_form').serialize();
		console.log("formData-=>",formData)

		
	    var val1 = $('#modal-editStoreKeyForm #post_form').val();
		console.log("val1-=>",val1)
		$.ajax({
		    url: "../api/baseInfo/cmn/update",
		    type: "POST",
		    data: formData,  // 直接传递序列化数据‌:ml-citation{ref="4,5" data="citationList"}
		    success: function(response) {
		        console.log("提交成功");
		    }
		});

		setTimeout(()=> {
			initialTable();
		},555)
 	}
 
	function showDetailFrom(e){
		console.log("showDetailFrom");
		console.log(e);
		console.log(e.item);
		var data1 = {};
		var url1 = "../api/baseInfo/cmn/detailStoreKey";
		
		$.ajax({
			type: "post",
			url: url1,
			dataType: "json",
			data: data1,
			success: function(res){
				console.log(res);
				//showStoreKeyForm1(res);
				
			},
			//此处添加错误处理
			error: function () {
				//alert("后台访问错误，请联系管理员！");
			}
		});
	}
	
	function postAddData(){
		console.log("postAddData()")
		// 序列化表单值
	    var formData = $('#post_form').serialize();
		console.log("formData-=>",formData)
		
	    var val1 = $('#post_form').val();
		console.log("val1-=>",val1)
		$.ajax({
		    url: "../api/baseInfo/cmn/addNew",
		    type: "POST",
		    data: $("#post_form").serialize(),  // 直接传递序列化数据‌:ml-citation{ref="4,5" data="citationList"}
		    success: function(response) {
		        console.log("提交成功");
		    }
		});

		setTimeout(()=> {
			initialTable();
		},555)
	}
	
</script>
</html>